<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<base href="${pageContext.request.contextPath}/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>系统用户设置角色</title>

<link rel="shortcut icon" href="favicon.ico">
<link href="resource/admin/css/bootstrap.min.css?v=3.3.6"
	rel="stylesheet">
<link href="resource/admin/css/font-awesome.css?v=4.4.0"
	rel="stylesheet">
<link href="resource/admin/css/plugins/iCheck/custom.css"
	rel="stylesheet">
<link href="resource/admin/css/animate.css" rel="stylesheet">
<link href="resource/admin/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
	<!-- 定义行数 -->
	<div class="row">
		<!-- 定义列数 -->
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<!-- 定义内容 -->
				<div class="ibox-content">
					<form method="post" class="form-horizontal" action="sys/role/add"
						id="roleForm">
						<div class="form-group">
							<label class="col-sm-3 control-label">角色名称</label>
							<div class="col-sm-6">
								<input type="text" placeholder="角色名称" class="form-control"
									id="role_name" name="role_name" autofocus>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">角色标识</label>
							<div class="col-sm-6">
								<input type="text" placeholder="设置唯一的角色标识" class="form-control"
									id="role_key" name="role_key">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">角色描述</label>
							<div class="col-sm-6">
								<textarea placeholder="角色功能描述" class="form-control" id="remark"
									name="remark"></textarea>
							</div>
						</div>

						<div class="form-group">
							<div class="col-sm-6 col-sm-offset-3">
								<button class="btn btn-primary" type="button" id="addBtn">新建角色</button>
								<button class="btn btn-default" type="reset">取消</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

	</div>

	<!-- 全局js -->
	<script src="resource/admin/js/jquery.min.js?v=2.1.4"></script>
	<script src="resource/admin/js/bootstrap.min.js?v=3.3.6"></script>
	<script src="resource/admin/js/plugins/layer/layer.min.js"></script>

	<!-- 自定义js -->
	<script src="resource/admin/js/content.js?v=1.0.0"></script>

	<!-- 引入jquery的插件验证框架 -->
	<script src="resource/admin/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="resource/admin/js/plugins/validate/messages_zh.min.js"></script>
	<!-- 错误提示的自定义样式 -->
	<script src="resource/admin/js/plugins/validate/validation.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#addBtn").click(function() {
				var role_name = $.trim($("#role_name").val());
				var role_key = $.trim($("#role_key").val());

				if (role_name == "") {
					layer.msg("角色的名称不能为空！");
					return false;
				}
				if (role_key == "") {
					layer.msg("角色的唯一标识不能为空！");
					return false;
				}

				//Ajax判定role_key
				$.get("sys/role/valid/role_key", {
					role_key : role_key
				}, function(data) {
					if (data.flag == "success") {
						$("#roleForm").submit();
						return false;
					} else {
						layer.msg(data.message);
						$("#role_key").val(old_role_key);
						return false;
					}
				}, "json")
			});
		});
	</script>

</body>
</html>